<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>的使用创建dom节点动态生成表格</h1>
        <label for="">行：</label>
        <input type="text" id="row">
        <label for="">列：</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="生成">
        <div id="output">
            <!-- <table>
                <tbody>
                    <tr>
                        <td>浮动法</td>
                    </tr>
                </tbody>
            </table> -->
        </div>
    </div>

   




    <script>
        // 获取元素
        var _row = document.querySelector('#row')
        var _col = document.querySelector('#col')
        var btn = document.querySelector('#btn')

        // 给生成按钮绑定点击事件生成表格
        btn.onclick = function(){
            // 再次点击添加列表时清空output
            output.innerHTML = ''
            // 创建table，tbody
            var tab = document.createElement('table')
            var tbo = document.createElement('tbody')
            // 获取行列输入的value值
            var row = _row.value
            var col = _col.value
                // 根据获取的行列value值生成表格
                for(var i = 0;i < row;i++){
                    // 生成tr
                var tr = document.createElement('tr')
                // 技术行设置颜色
                    if(i%2 !==0){
                        tr.style.backgroundColor = 'gray'
                    }
                    // 内循环生成列
                    for(var j = 0;j < col;j++){
                        // 创建td
                        var td = document.createElement('td')
                        // 给每一行第一个td设置序号
                        if(j ==0){
                            td.innerHTML = i +1
                        }
                        if(j !==0){
                            td.innerHTML = '单元格' +  (i+1) + j
                        }
                        // 把td放到tr里
                        tr.appendChild(td)
                    }
                //    再创建一个td放到tr最后
                   var td = document.createElement('td')
                //    设置删除添加按钮
                   var input1 = document.createElement('input')
                   var input2 = document.createElement('input')
                //    把创建的按钮添加到最后一个td中
                   var inps1 = td.appendChild(input1)
                   var inps2 = td.appendChild(input2)
                //    设置input value值 类型
                   inps1.value = '删除'
                   inps2.value = '添加'
                   inps1.type = 'button'
                   inps2.type = 'button'
                //    再把td添加到tr中
                   tr.appendChild(td)
                    // 给删除按钮添加点击事件
                    inps1.onclick = function(){
                        this.parentElement.parentElement.remove()
                    }

                    // 给添加按钮设置点击事件
                    inps2.onclick = function(){
                        var res = this.parentElement.parentElement.cloneNode(true)
                        tbo.appendChild(res)
                        abc(res);
                    }
                // 封装函数用来调用  给新生成的列表行添加点击删除添加事件
                function abc(res){
                        var btns = res.querySelectorAll('input');
                        var add = btns[1];
                        var del = btns[0];
                        del.onclick = function(){
                            this.parentElement.parentElement.remove()
                        }
                        add.onclick = function(){
                            var res = this.parentElement.parentElement.cloneNode(true)
                            tbo.appendChild(res);
                            abc(res);
                        }
                }
                // 把新生成的tr放到tbody中
                tbo.appendChild(tr)
            }
            // 把tbody放到table里
            tab.appendChild(tbo)
            // 把table放到div里
            output.appendChild(tab)
        }
    </script>
</body>
</html>